<template>
	<view :class="currentTheme">
		<a-nabbar name="展会详情" />
		<view class="content">
      <u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="u-padding-32">
			<item-box padding="0">
				<view class="u-padding-32">
					<view class="text-bold u-font-36">{{form.name}}</view>
					<view class="u-flex date-title u-margin-top-25">
						<view class="u-font-20  u-margin-buttom-25" style="color:#4D4D4D">{{form.beginTime | dayFormatZH}}-{{form.endTime | dayFormatZH}}</view>
						<view class="u-flex  text-tips">
							<u-icon name="chakan" size="30" custom-prefix="index-custom-icon"></u-icon>
							<text class="u-font-20 u-margin-left-10">{{form.browse}}</text>
						</view>
					</view>

					<view class="u-font-28 u-margin-top-44 u-margin-buttom-30  text-bold">展会门票</view>
					<view class="u-flex ticket u-margin-top-30">
						<Ticket ticketType="店家票" :price="form.storeExhibitionPrice" :pepleNum="form.storeTicketSales" :isHave="form.storeTicketId>0 && form.storeExhibitionPrice>0?true:false" :ticketId="form.storeTicketId"></Ticket>
						<Ticket ticketType="发行票" :price="form.issueExhibitionPrice" :pepleNum="form.issueTicketSales" :isHave="form.issueTicketId>0 && form.issueExhibitionPrice>0?true:false" :ticketId="form.issueTicketId"></Ticket>
					</view>
				</view>
			</item-box>
		</view>

	<!-- 留言板 -->
		<view class="u-padding-32 liuyanban">
			<item-box padding="0" >
        <view class="u-flex u-row-between u-padding-20">
 						<view class="">
 							<text class="text-bold" style="font-size: 28rpx">留言板</text>
 							<!-- <text class="box-title u-font-24 u-margin-left-24"
 								v-if="replyListTotal>0">{{replyListTotal}}条</text> -->
 						</view>
 						<view class="box-title" style="font-size: 22rpx" @click="goCommentsDatail">
 							查看更多 <u-icon name="arrow-right"></u-icon>
 						</view>
 					</view>
				<comment @onFocus="onFocus" :commentsList="commentsList" @delete="deleteCommentsId($event)"></comment>
        <view class="unContent" v-if="commentsList.length==0">暂无评论</view>
			</item-box>
      
		</view>
   
    </view>
		<!-- 评论框 -->
		<comment-inputs :focus="focus" @input="getContent($event)" @click="saveComments($event)" :placeholder="comments.content"></comment-inputs>
	</view>
</template>

<script>
// import Comments from './components/comments.vue';
import comment from '../acomponents/comment.vue';
import { getDetail } from '@/api/crud.js';
import replyItem from '@/components/replyItem/replyItem.vue';
import Ticket from './components/ticket.vue';
import CommentInputs from '../acomponents/commentInputs.vue';
import { getExhibitComments, saveExhibitComments, delComment } from '@/api/advertising.js';
import commentsHandle from '@/mixins/commentsHandle.js';
export default {
	components: {
		replyItem,
		comment,
		Ticket,
    CommentInputs
	},
  mixins:[commentsHandle],
	data() {
		return {
			apiModule: 'shopApi',
			apiType: 'exhibitCalendar',
      type:'getExhibitComments',
			form: {},
			replyList: [],
			option: {},
      focus:false,
      exhibitId: '' , // 展会id
      comments: {
        content: '',
        parentCreater:''
      },
      commentsList: [], // 展会评论列表
		};
	},
  async	onLoad(option) {
		this.option = option;
	  await	getDetail({},this.apiType, this.apiModule, `get/${this.option.id}`).then(res => {
			this.form = res;
      this.exhibitId = this.form.exhibitId
		})
    this.getExhibitComments()
    
	},
	computed: {
		bannerList() {
			const img = this.splitStr(this.form.sliderImage);
			return img.map(this.imgFilter);
		}
	},
	filters: {
		dayTimeStarts(val) {
			console.log(val, '开始时间');
			return val.substring(0, 5);
		},
		dayTimeEnds(val) {
			console.log(val, '结束时间');
			return val.substring(0, 5);
		},
		nameStr(val) {
			if (val && val.length > 8) {
				val = val.substring(0, 8) + '···';
			} else {
				return val;
			}
			return val;
		},
	},
	methods: {
    // 删除评论
   async deleteCommentsId(data){
      console.log(data,'删除的对象');
      await delComment(data)
      this.getExhibitComments()
    },
    // 发送评论
    async saveComments(e){
      console.log(this.comments,'有了吧');
      if(this.comments.parentCreater) {
          await saveExhibitComments({
           exhibitId: this.exhibitId,
           content: e,
           parentCreater: this.comments.parentCreater
         })
      } else {
        await saveExhibitComments({
           exhibitId: this.exhibitId,
           content: e,
         })
      }
      this.comments = {}
      console.log(this.comments,'没有了吧');
      this.getExhibitComments()
    },
    // 获取组件评论
    getContent(e){
      this.comments.content = e
    },
    // 获取展会评论
    async getExhibitComments(){
    console.log(this.exhibitId,'this.exhibitId');
    let res = await getExhibitComments({exhibitId: this.exhibitId})
    console.log(res,'res');
    this.commentsList = res.content.slice(0,8) //外面展会页只显示8条数据
    },
    onFocus(e){
      console.log(e,'穿过');
      this.focus = e.focus,
      this.comments.parentCreater = e.creater
      this.comments.content = e.createName
    },
		//预览
		bannerListPreview(index) {
			this.previewUrls(this.bannerList, index);
		},
		splitStr(str) {
			return (str && str.split(',')) || [];
		},
    // 查看所有评论
    goCommentsDatail(){
      this.$u.route({
        url:'pagesB/exhibitionCalender/commentsDetail',
        params: {
          exhibitId: this.exhibitId,
        }
      })
    }
	}
};
</script>

<style lang="scss" scoped>
.scroll-view-list {
	height: 380rpx;
	padding-right: 30rpx;
}
.nickname {
	width: 192rpx;
	box-sizing: border-box;
}

.storeProducts-title {
	display: flex;
	justify-content: space-between;
}

.fans-tab {
	height: 36rpx;
	background: linear-gradient(to right, #765cfe, #ac5cfe);
	border-radius: 8rpx;
	padding: 0 15rpx;
	color: #fff;
}


.date-title {
	display: flex;
	justify-content: space-between;
}

.ticket {
	justify-content: space-between;
}

// .ticket-true {
// 	width: 290rpx;
// 	height: 160rpx;
// 	background-image: url('../../static/images/票(彩).png');
// 	background-size: contain;
// 	position: relative;
// 	color: #765cfe;
// 	.explain {
// 		display: flex;
// 		flex-direction: column;
// 		justify-items: center;
// 		text-align: center;
// 		position: absolute;
// 		top: 10rpx;
// 		right: 36rpx;
// 	}
// }

// .ticket-false {
// 	width: 290rpx;
// 	height: 160rpx;
// 	background-image: url('../../static/images/票.png');
// 	background-size: contain;
// }

// .DJP,
// .FXP {
// 	width: 28rpx;
// 	font-size: 28rpx;
// 	line-height: 28rpx;
// 	margin-left: 24rpx;
// }

// .buy-ticket {
// 	width: 124rpx;
// 	height: 44rpx;
// 	background-color: #765cfe;
// 	border-radius: 22rpx;
// 	font-size: 26rpx;
// 	color: #fff;
// 	line-height: 44rpx;
// }

.liuyanban {
	padding-top: 0 !important;
}

.content {
  padding-bottom: 200rpx;
}

.unContent {
  height: 120rpx;
  width: 100%;
  text-align: center;
  line-height: 120rpx;
  color: #999;
  font-size: 20rpx;
}
</style>
